<template>
	
		<div id="divtop" style="width: 1163px;height: 450px;">
			<el-table :data="news" height="440" style="width: 100%">
			  
			    <el-table-column  prop="newsSendTime" label=""  :show-overflow-tooltip="true">
					<template #default="scope">
						<p  v-if="scope.row.sendUserId!=user.userId"  style="text-align: left;background-color:ghostwhite;">{{scope.row.newsSendTime}}  :  {{scope.row.newsText}}</p>
						<p  v-if="scope.row.sendUserId==user.userId"  style="text-align: right;background-color: ghostwhite;">{{scope.row.newsSendTime}}  :  {{scope.row.newsText}}</p>
						<p v-else> </p>
					</template>
				</el-table-column>
				
				
				
				
			</el-table>
			
		</div>
		
			<el-row style="height: 40px;">
				<el-col span="8"></el-col>
			    <el-col span="8"></el-col>
				<el-col span="8">
					<el-button type="info" round @click="checkHistoryNews">查看历史纪录</el-button> 
					<el-button type="info" round @click="saveHistoryNews">保存当前纪录</el-button>
				</el-col>
				
			</el-row>
	
		<div class="divinput">
			<el-input
			    v-model="input"
			    maxlength="300"
				:rows="6"
			    placeholder="请在此输入文本.."
			    show-word-limit
			    type="textarea"
			  />
			  <el-row>
			  	<el-col :span="10"></el-col>
			  	<el-col :span="10"></el-col>
			  	<el-col :span="4">
			  		<el-button type="primary" @click="clearInput">清除</el-button>
			  		<el-button type="primary" @click="sendNews">发送</el-button>
			  	</el-col>
			  
			  
			  </el-row>
			  
				 
		</div>
		
		
		
	
</template>

	
<script>
	import qs from 'qs'
	
	export default{
		data(){
			return{
				test:{},
				news:[],
				other:{},
				sessionid:-1,
				input:'',
				user:{}
				
			}
		},
		methods:{
			checkHistoryNews(){
				this.$router.push({name:"history"})
			},
			saveHistoryNews(){
				this.$router.push({name:"saveNews"})
			},
			sendNews(){
				let that=this
				var news={}
				news.newsText=that.input
				news.sessionId=Number(that.sessionid)
				news.sendUserId=that.user.userId
				news.acceptUserId=that.other.userId
				let str=qs.stringify(news)
				that.$axios.get("http://localhost:8080/session/sessioninsertnews?"+str).then(function(res){
					console.log(res)
				})
				that.input=''
				that.$router.go(0)
			},
			clearInput(){
				this.input=''
			},
			ifshow(a){
				if(a==this.user.userId){return false}
				else{return true}
			},
			init(){
				let that=this
				const rule={}
				rule.sessionId=that.sessionid
				var str=qs.stringify(rule)
				that.$axios.get("http://localhost:8080/session/sessionnews?"+str).then(function(res){
					that.news=res.data
					
				})
			}
		},
		created(){
			
			const s=JSON.parse(sessionStorage.getItem("sessionnews"))
			console.log(s.sessionId)
			this.sessionid=s.sessionId
			this.other.userId=s.bothid
			this.other.userAvatar=s.bothA
			this.other.seeionId=s.sessionId
			let loginUser=JSON.parse(sessionStorage.getItem("user"))
			this.user=loginUser
			this.init()
			
			console.log(this.other)
		}
	}
</script>

<style>
	.elmain{
		box-shadow: var(--el-box-shadow-lighter);
	},
	#divtop{
		width:660px;
		height: 350px;
		overflow: scroll;
		border-top-width: 1px;
		border-right-width: 1px;
		border-left-width: 1px;
		
	}
</style>
